<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <div class="datare">
                  <div class="ra">个体工商户店</div>
                  <div class="ajfdpf">　　　　　店铺基本信息</div>
                 
                  <el-form ref="form" :model="form" label-width="170px">
                    
                  <el-form-item label="店铺名称：" style="margin-top: 20px;">
                    <el-input v-model="form.name" style="width: 30%;  "></el-input>
                  </el-form-item>
                  <el-form-item label="主营类目：">
                    <el-select v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                    <div class="qwdrwqfqwq">　　　　　　　一个店铺只能选择一个主营类目不可修改,普通类目入驻后，可以补充资质发布除虚拟商品，医药健康之外的所有类目商品</div>
                   
                   <div class="ajfdpf">　　　　　开店人基本信息</div>
                   <div class="adasdaasb">　　　　　　身份证像</div>
                   <div class="wdawfafa">
                     
                     <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon">正面上传</i>
                    </el-upload>
                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon">反面上传</i>
                    </el-upload>
                   </div>
                   <div class="ajfdpf">　　　　　个体工商户营业信息</div>

                  <el-form-item label="是否三证合一:">
                    <el-radio-group v-model="form.resource1">
                      <el-radio label="是"></el-radio>
                      <el-radio label="否"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                 <el-form-item label="统一社会信用代码:" style="margin-top: 20px;">
                    <el-input v-model="form.name1" style="width: 30%;  "></el-input>
                  </el-form-item>
                <el-form-item label="营业执照有效期:" >
                      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 30%;"></el-date-picker>
                </el-form-item>

                    <el-upload
                      class="avatar-uploader"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon">营业执照上传</i>
                    </el-upload>
                  <el-form-item>
                    <el-checkbox v-model="form.delivery">我已阅读并同意《平台合作协议》</el-checkbox>
                  </el-form-item>
                 
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交审核</el-button>
                  </el-form-item>
                </el-form>
                </div>
              </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
export default {
    components: { 
    merchantHeader,
    Footer
    },
    data() {
      return {
        imageUrl: '',
        options: [{
          value: '1',
          label: '品牌服饰'
        }, {
          value: '2',
          label: '护肤彩妆'
        }, {
          value: '3',
          label: '鞋靴箱包'
        }, {
          value: '4',
          label: '珠宝饰品'
        }, {
          value: '5',
          label: '母婴用品'
        },{
          value: '6',
          label: '家电数码'
        },{
          value: '7',
          label: '日用百货'
        }, {
          value: '8',
          label: '食品生鲜'
        }, {
          value: '9',
          label: '酒水饮料'
        }, {
          value: '10',
          label: '办公学习'
        }, {
          value: '11',
          label: '本地服务'
        },{
          value: '12',
          label: '虚拟服务'
        },
        ],
        value: '',
        form: {
          name: '',
          delivery: false,
          resource: '',
          resource1:'',
          name1:'',
          data1:''
        }
      }
      
    },
    methods: {
      onSubmit() {
        if(this.form.delivery==false){
          this.$message.error('请先勾选平台合作协议');
        }
      },
         handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
}
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader {
    border: 1px solid #eee;
    margin-left: 80px;
    margin-top: 20px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 18px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.datare /deep/ .el-button--primary:hover {
    background: #fdab9c;
    border-color: #fdab9c;
}
.datare /deep/ .el-button--primary {
    color: #FFF;
    background-color: #ff9381;
    border-color: #ff9381;
}

.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datare {
  height: 1300px;
  width: 1200px;
  border-radius: 6px;
  background-color: #fff
}

.datare .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 30px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px 
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.ajfdpf {
  	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #434343;
  border-bottom: 1px solid #dcdcdc;
  margin-top: 35px;
}
.qwdrwqfqwq {
	font-size: 14px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 34px;
	letter-spacing: 0px;
	color: #a0a0a0;
  margin-top: 15px;
}
.wdawfafa {
    display: flex;
  justify-content: space-between;
  width: 300px;
}
.adasdaasb {
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #292929;
  margin-top: 10px;
}
</style>